<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Transition 示例</title>  
<style>  
  .transition-box {  
    width: 100px;  
    height: 100px;  
    background-color: blue;  
    transition-property: background-color, width, height, opacity; /* 指定要过渡的属性 */  
    transition-duration: 2s, 1s, 1.5s, 0.5s; /* 每个属性的过渡持续时间 */  
    transition-timing-function: ease-in-out, linear, ease-out, ease-in; /* 每个属性的过渡时间函数 */  
    transition-delay: 0s, 0.2s, 0.4s, 0.1s; /* 每个属性的过渡延迟时间 */  
    opacity: 1;  
  }  

  /*
  transition-property;
  transition-duration;
  transition-timing-function;
  transition-delay;
  */
  
  .transition-box:hover {  
    background-color: green;  
    width: 200px;   
    height: 150px;  
    opacity: 0.5;  
  }  

  /*一根1px的线*/
  .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid black;
    }
</style>  
</head>  
<body>  
  
<div class="transition-box"></div>  
<div class="line"></div>

  
</body>  
</html>